{#
  Params
  - title_text (string): The text to be displayed as the heading
  - layout: layout of linked logo section. Options are '50/50', '25/75', 'full-width'
  - links (array) (required) : Array of links, each including 'href', 'label', 'text', and 'image_html'
  - if present, `image_attrs` will be used over `image_html` as it provides a more flexible way to pass image attributes.
  - top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" | "highlighted" | "none" (default is "default").
  - padding: Type of padding to apply to the pattern - "deep", "shallow", "default", "none" (default is "default").
#}

{% macro vf_linked_logo_section(title_text="", links=[], layout="full-width", top_rule_variant="default", padding="default") -%}
  {% set layout = layout | trim | replace('/', '-') %}

  {% set has_title = title_text | trim | length > 0 %}

  {% if layout not in ['50-50', '25-75', 'full-width'] %}
    {% set layout = 'full-width' %}
  {% endif %}

  {% set max_logos_map = {
    "full-width": 8,
    "50-50": 6,
    "25-75": 9
  } %}

  {% set max_logos = max_logos_map[layout] or 8 %}
  {% set links = links[:max_logos] %}

  {% set top_rule_variant = top_rule_variant | trim -%}
  {%- if top_rule_variant not in ["default", "muted", "highlighted", "none"] -%}
    {%- set top_rule_variant = "default" -%}
  {%- endif -%}

  {%- if top_rule_variant != "none" -%}
    {%- set top_rule_classes = "p-rule" -%}
    {%- if top_rule_variant != "default" -%}
      {#-
        p-rule--highlighted doesn't exist (use p-rule--highlight instead), but p-rule--muted does.
        We keep the external API here consistent ("-ed" suffix) for simplicity but need to handle this internally.
      -#}
      {%- if top_rule_variant == "highlighted" -%}
        {%- set top_rule_classes = "p-rule--highlight" -%}
      {%- else -%}
        {#- Other cases: just append the top_rule_variant to the p-rule class. -#}
        {%- set top_rule_classes = top_rule_classes + "--" + top_rule_variant -%}
      {%- endif -%}
    {%- endif -%}
  {%- endif -%}

  {%- set padding = padding | trim -%}
  {%- if padding not in ["deep", "shallow", "default", "none"] -%}
    {%- set padding = "default" -%}
  {%- endif -%}

  {%- set padding_classes = "p-section--" + padding -%}
  {%- if padding == "default" -%}
  {%- set padding_classes = "p-section" -%}
  {%- elif padding == "none" -%}
  {%- set padding_classes = "" -%}
  {%- endif -%}

  {% macro _list(links, cols_per_item=2) %}
    {%- if links|length > 1 -%}
      <div class="grid-row">
        {%- for link in links -%}
          <div class="grid-col-{{ cols_per_item }} grid-col-medium-{{ cols_per_item }}">
            <a href="{{ link.href }}" aria-label="{{ link.label }}">
              <div class="p-image-container--16-9 is-highlighted">
              {#- If image_attrs is present, use it to generate the image HTML -#}
              {%- if "image_attrs" in link -%}
                <img class="p-image-container__image {{ link["image_attrs"]["class"] }}"
                  {% for attr, value in link["image_attrs"].items() %}
                    {% if attr != "class" %}
                      {{ attr }}="{{ value }}"
                    {% endif %}
                  {% endfor %}
                >
              {% else %}
                {{ link.image_html | safe }}
              {% endif %}
              </div>
              <hr class="p-rule--muted">
              <p>{{ link.text }}</p>
            </a>
          </div>
        {%- endfor -%}
      </div>
    {%- endif -%}
  {% endmacro %}

  {%- if padding == "none" -%}
  <div>
  {%- else -%}
  <section{%- if padding_classes | length > 0 %} class="{{ padding_classes }}"{%- endif -%}>
  {%- endif -%}
    {%- if top_rule_variant != "none" -%}
      <hr class="is-fixed-width {{ top_rule_classes -}}"/>
    {%- endif -%}
    {%- if layout == "50-50" -%}
      <div class="p-section--shallow">
        <div class="grid-row">
          {% if has_title %}
          <div class="grid-col-4">
            <h2>{{ title_text }}</h2>
          </div>
          {% endif %}
          <div class="grid-col-4 grid-col-start-large-5 grid-col-medium-4 grid-col-start-medium-5">
            {{ _list(links) }}
          </div>
        </div>
      </div>
    {%- elif layout == "25-75" -%}
      <div class="p-section--shallow">
        <div class="grid-row">
          {% if has_title %}
          <div class="grid-col-2">
            <h2>{{ title_text }}</h2>
          </div>
          {% endif %}
          <div class="grid-col-6 grid-col-start-large-3">
            {{ _list(links) }}
          </div>
        </div>
      </div>
    {%- else -%}
      {% if has_title %}
        <div class="p-section--shallow">
          <div class="grid-row">
            <h2>{{- title_text -}}</h2>
          </div>
        </div>
      {% endif %}
      {{ _list(links) }}
    {%- endif -%}
  {%- if padding == "none" -%}
  </div>
  {%- else -%}
  </section>
  {%- endif -%}
{%- endmacro %}
